<template>
	<view class="orderList">
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">全部 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">待付款 <view :class="tabIndex==1?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==2?'active':''"  @click="chgTab(2)">预约中 <view :class="tabIndex==2?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==3?'active':''"  @click="chgTab(3)">进行中 <view :class="tabIndex==3?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==4?'active':''"  @click="chgTab(4)">待评价 <view :class="tabIndex==4?'active':''"></view></view>
		</view>
		<scroll-view  @scrolltolower='nextPage()' lower-threshold="500" class="" scroll-y :style="{height: orderHeight+'px'}">
		<view v-if="!isNull" class="courseList">
			<view v-for="itm in getOrderlist" class="courseList-list" >
				<view class="" @click="goDetail(itm.orderNo)">
					<view class="box d-jc-sb d-ai-c d-box">
						<view class="" v-if="itm.type==1">
							服务类型：门诊陪伴
						</view>
						<view class="" v-if="itm.type==2">
							服务类型：血透门诊陪伴
						</view>
						<view class="" v-if="itm.type==3">
							服务类型：代配药门诊陪伴
						</view>
						<view class="footer">
							<view class="status" style="color: #FF7E51;" v-if="itm.status==1">待付款</view>
							<view class="status" style="color: #FF7E51;" v-if="itm.status==2">
								<view class="status" style="color: #FF7E51;" v-if="itm.failStatus==0">预约中</view>
								<view class="status" style="color: #FF7E51;" v-if="itm.failStatus==1">退款中</view>
								<view class="status" style="color: #FF7E51;" v-if="itm.failStatus==2">退款失败</view>
								<view class="status" style="color: #FF7E51;" v-if="itm.failStatus==3">退款成功</view>
							</view>
							<view class="status" style="color: #FF7E51;" v-if="itm.status==3">进行中</view>
							<view class="status" style="color: #999999;" v-if="itm.status==6">已取消</view>
							<view class="status" style="color: #FF7E51;" v-if="itm.status==4">待评价</view>
							<view class="status" style="color: #999999;" v-if="itm.status==7">已超时</view>
							<view class="status" style="color: #FF7E51;" v-if="itm.status==5">已完成</view>
						</view>
					</view>
					<view class="d-box">
						就诊对象：{{itm.name}}
					</view>
					<view class="d-box mt-2">
						出发时间：{{itm.createTime}}
					</view>
				</view>
				<view class="box mt-2 d-jc-end">
					<view class="grey" v-if="itm.status==1" @tap="cancelorder(itm.orderNo)">取消订单</view>
					<view class="orange ml-2" v-if="itm.status==1" @tap="pay(itm.orderNo,itm.money)">立即支付</view>
					<view class="grey" v-if="itm.status==2&&itm.failStatus!=3" @tap="applyrefund(itm.orderNo,itm.money)">申请退单</view>
					<view class="orange ml-2" v-if="itm.status==2" @click="goDetail(itm.orderNo)">查看详情</view>
					<!-- <view class="orange ml-2" v-if="itm.status==9">服务进度</view> -->
					<view class="orange ml-2" v-if="itm.status==4" @tap="orderavaluate(itm.orderNo)">服务评价</view>
				</view>
			</view>
		</view>
		<view v-if="isNull" class="order_null">
			<image src="../../static/zanwudingdan@2x.png"></image>
			<text>暂时还没有订单~</text>
			<!-- <button class="btn-shop-list" @tap='shopList()'>去逛逛</button> -->
		</view>
		</scroll-view>
		<wybpopup ref="popup1" type='bottom'>
			<view class="popup1">
				<view class="pop-t">
					<view>选择支付方式</view>
					<image class="pop_images1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode="" @tap="payclose()"></image>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/weixin@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/huiyuan@2x.png" mode=""></image>
							<view class="pop-name box">
								<text>{{item.name}}</text>
								<!-- <text class="ml-1" v-if="item.value==='2'">会员免费购买</text> -->
							</view>
						</view>
						<view>
							<radio :value="item.value" :color="color" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<view class="bot">
					<view class="font">
						需付款：<text style="color:#F25A49">￥{{money}}</text>
					</view>
					<view class="payment" type="default" @tap='paymoney'>
						立即支付
					</view>
				</view>
		
		
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup
		       },
		data() {
			return {
				color:'#FF8338',
				money:'',
				orderNo:'',
				items: [
					{
						value: '1',
						name: '微信支付',
					},
					{
						value: '2',
						name: '会员支付',
						checked: 'true'
					}
				
				],
				current:0,
				isNull:false,
				hasNextPage:false,
				orderList:[],
				pageNum:1,
				pageSize:10,
				tabIndex:'',
				shopId:'',
				orderHeight:400,
				getOrderlist:[],
				order:[{
					'time':'2021-06-29 14:15',
					'user':'张三',
					'type':'血透门诊陪伴',
					'status':'1',   //0:待付款   1:已报名
				},{
					'time':'2021-06-29 14:15',
					'user':'陈松',
					'type':'门诊陪伴',
					'status':'0',   //0:待付款   1:已报名
				}]
			}
		},
		onLoad(option) {
				this.chgTab(option.num)
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(110) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onShow() {
			let carData = ''
			let _this = this
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 0) {
					console.log(carData)
					_this.chgTab(carData)
				} else if(carData == 3){
					_this.chgTab(carData)
				}else if(carData == 2){
					_this.chgTab(carData)
				}
			})
			this.orderlist()
		},
		methods: {
			paymoney() {
				let _this = this
				let type = 1;
				if(this.current==0){
					type = 1
				}
				if(this.current==1){
					type=4
				}
				console.log(type)
				if(type==1){
					this.$api.wxpax({
						orderNo: _this.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							if(type==1){ //微信支付
								uni.requestPayment({
									appId:res.data.dataMap.appid,
								    provider: 'wxpay',
								    timeStamp:res.data.dataMap.timeStamp,
								    nonceStr: res.data.dataMap.nonceStr,
								    package: res.data.dataMap.package,
								    signType: 'MD5',
								    paySign: res.data.dataMap.paySign,
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											duration: 500,
											icon: "none"
										});
										_this.payclose()
										this.chgTab(2)
										
										
								    },
								    fail: function (err) {
								       uni.showToast({
								       	title: '支付失败',
								       	duration: 500,
								       	icon: "none"
								       });
								    }
								});
							}
						}else{
							this.close()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}else if(type==4){
					this.$api.wxpax({
						orderNo: _this.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							uni.showToast({
								title: '支付成功',
								duration: 500,
								icon: "none"
							});
							_this.payclose()
							_this.chgTab(2)
							
						}else{
							_this.payclose()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}
			},
			radioChange: function(evt) {
				console.log(evt.detail.value)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			//支付弹框
			pay(orderNo,money){
				this.orderNo = orderNo
				this.money = money
				this.$refs.popup1.show()
			},
			payclose(){
				this.$refs.popup1.hide()
			},
			applyrefund(orderNo,money){
				uni.navigateTo({
					url:'applyrefund?orderNo='+orderNo+'&money='+money
				})
			},
			cancelorder(orderNo){
				uni.showModal({
				    title: '提示',
				    content: '确定取消该订单吗？',
				    success:(res) =>{
				        if (res.confirm) {
				           this.$api.ordercancel ({
				           	status:6,
				           	orderNo:orderNo
				           }).then((res) => {
				           	if(res.data.code=200){
				           		console.log(res.data.dataMap)
				           		uni.showToast({
				           		    title: '取消成功',
				           		    duration: 2000,
				           			icon:'none'
				           		});
				           		this.orderlist()
				           	}
				           			
				           })
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			orderavaluate(orderNo){
				uni.navigateTo({
					url:'Avaluate?orderNo='+orderNo
				})
			},
			orderlist(status){
				this.status = status
				this.$api.Listorder({
					status:this.status
				},this.pageNum,this.pageSize).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.getOrderlist = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.getOrderlist.length < 1 ? true : false
					}
							
				})
			},
			shopList(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			chgTab(index){
				this.tabIndex = index;
				if(index==0){
					this.payState = ''
					this.orderlist('')
				}else if(index==1){
					this.payState = 1
					this.orderlist(1)
				}else if(index==2){
					this.payState = 0
					this.orderlist(2)
				}else if(index==3){
					this.payState = 3
					this.orderlist(3)
				}else if(index==4){
					this.payState = 9
					this.orderlist(4)
				}
				//TODO:::加载数据
			},
			goDetail(orderNo){
				uni.navigateTo({
					url:"orderInfo?orderNo="+orderNo
				})
			},
			nextPage() {
				// let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.Listorder({
						status: this.status,
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.getOrderlist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			//获取订单列表
			// getOrderList(payState) {
			// 	this.orderList = []
			// 	this.pageNum = 1
			// 	let _this = this
			// 	this.$api.getClassOrdersList({
			// 		status: payState,
			// 		shopId:_this.shopId
			// 	}, _this.pageNum,_this.pageSize).then((res) => {
			// 		if (res.data.code == 200) {
			// 			console.log(res.data.dataMap)
			// 			_this.orderList = res.data.dataMap.list
			// 			for(var i = 0;i < res.data.dataMap.list.length;i++){
			// 				_this.orderList[i].createTime = _this.renderTime(_this.orderList[i].createTime)
			// 			}
						
			// 			_this.isNull = _this.orderList.length < 1 ? true : false
			// 			_this.hasNextPage = res.data.dataMap.hasNextPage
			// 		}
			// 	})
			// },
			// 时间转换
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.wyb-popup-box{
		position: fixed;
		transition-timing-function: ease-out;
		transition-property: opacity, transform;
	    border-radius: 60rpx 60rpx 0rpx 0rpx!important;
	}
	.bot{
		margin-top: 100rpx;
		text-align: center;
		.font{
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.payment{
			width: 670rpx;
			height: 100rpx;
			background: #FF8338;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}
	
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		display: block;
		width: 180rpx;
		height: 36rpx;
		border: 2rpx solid #F25A49;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #F25A49;
		line-height: 36rpx;
		text-align: center;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		width: 750rpx;
		height: 80rpx;
		margin-top: 40rpx;
		position: relative;
	}
	.pop-t>view{
		position: absolute;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		left: 275rpx;
		
	}
	.pop_images1{
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 40rpx;
	}
	.popup1 {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
	.orderList{
		background-color: #F2F7FF;
	}
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 261rpx;
		height: 256rpx;
	}
	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;color: #FF8338;}
  	 .tab-item{
		 font-size: 30rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	// background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
			color: #FF8338;
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  
  .courseList{
	  .courseList-list{
		  width: 630rpx;
		  // height: 180rpx;
		  margin: 0 auto;
		  background-color: white;
		  padding: 20rpx 30rpx;
		  margin-top:10px;
		  .d-box{
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #333333;
		  }
		  .grey{
			  width: 180rpx;
			  height: 68rpx;
			  background: #FFFFFF;
			  border: 2rpx solid #CCCCCC;
			  border-radius: 34rpx;
			  line-height: 68rpx;
			  text-align: center;
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #666666;
		  }
		  .orange{
			  width: 180rpx;
			  height: 68rpx;
			  background: #FF8338;
			  border: 2rpx solid #FF8338;
			  border-radius: 34rpx;
			  font-size: 26rpx;
			  font-weight: 500;
			  color: #FFFFFF;
			  line-height: 68rpx;
			  text-align: center;
		  }
		   .footer{display: flex;justify-content: space-between;padding:10px;
		    align-items: center;
		    .status{font-weight: bold;}
		  }
	  }
	  
	  
  }
</style>
